<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 1000px;
            overflow: hidden;
            background-color: red;
            position: relative;
        }
        main{
            height: 100px;
            background-image: linear-gradient(pink,aqua);
        }
    </style>
</head>
<body>
    <div>
        <!-- p{内容$是序号}*100 -->
        <p>p001</p>
        <p>p002</p>
        <p>p003</p>
        <p>p004</p>
        <p>p005</p>
        <p>p006</p>
        <p>p007</p>
        <p>p008</p>
        <p>p009</p>
        <p>p010</p>
        <p>p011</p>
        <p>p012</p>
        <p>p013</p>
        <p>p014</p>
        <p>p015</p>
        <p>p016</p>
        <p>p017</p>
        <p>p018</p>
        <p>p019</p>
        <p>p020</p>
        <p>p021</p>
        <p>p022</p>
        <p>p023</p>
        <p>p024</p>
        <p>p025</p>
        <p>p026</p>
        <p>p027</p>
        <p>p028</p>
        <p>p029</p>
        <p>p030</p>
        <p>p031</p>
        <p>p032</p>
        <p>p033</p>
        <p>p034</p>
        <p>p035</p>
        <p>p036</p>
        <p>p037</p>
        <p>p038</p>
        <p>p039</p>
        <p>p040</p>
        <p>p041</p>
        <p>p042</p>
        <p>p043</p>
        <p>p044</p>
        <p>p045</p>
        <p>p046</p>
        <p>p047</p>
        <p>p048</p>
        <p>p049</p>
        <p>p050</p>
        <p>p051</p>
        <p>p052</p>
        <p>p053</p>
        <p>p054</p>
        <p>p055</p>
        <p>p056</p>
        <p>p057</p>
        <p>p058</p>
        <p>p059</p>
        <p>p060</p>
        <p>p061</p>
        <p>p062</p>
        <p>p063</p>
        <p>p064</p>
        <p>p065</p>
        <p>p066</p>
        <p>p067</p>
        <p>p068</p>
        <p>p069</p>
        <p>p070</p>
        <p>p071</p>
        <p>p072</p>
        <p>p073</p>
        <p>p074</p>
        <p>p075</p>
        <p>p076</p>
        <p>p077</p>
        <p>p078</p>
        <p>p079</p>
        <p>p080</p>
        <p>p081</p>
        <p>p082</p>
        <p>p083</p>
        <p>p084</p>
        <p>p085</p>
        <p>p086</p>
        <p>p087</p>
        <p>p088</p>
        <p>p089</p>
        <p>p090</p>
        <p>p091</p>
        <p>p092</p>
        <p>p093</p>
        <p>p094</p>
        <p>p095</p>
        <p>p096</p>
        <p>p097</p>
        <p>p098</p>
        <p>p099</p>
        <p>p100</p>
    </div>
    <main></main>
    
    <script>
        window.onresize = function(){
            console.log("浏览器窗口大小更改了");
        }

         var div = document.querySelector("div");
        window.onkeydown = function(e){
            console.log("键盘按下事件",e);
            // e.key 是按下的键值
            // e.keyCode  是按下的键的键码值
            // getBoundingClientRect用于获得页面中某个元素
            // 的左，上，右和下分别相对浏览器视窗的位置
            console.log(e.key);
            console.log(e.keyCode);
            var a = div.getBoundingClientRect();
            console.log(a);
            if(e.keyCode == 68){  // d 68
                div.style.left = a.left + 2 + "px";
            }
            if(e.keyCode == 65){  // a 65
                div.style.left = a.left - 4 + "px";
            }
        }
        window.onkeyup = function(){
            console.log("键盘抬起事件");
        }
        window.onkeypress = function(){
            console.log("键盘点击事件");
        }
        
        // 内容卷起事件
        window.onscroll = function(){
            console.log("页面滚动事件");
            // 获取文档呗卷走内容的高度
            console.log(document.documentElement.scrollTop);
        }

        // 
        window.onwheel = function(){
            console.log("滚轮事件");
        }


       
        div.onscroll = function(){
            // console.log("===");
            console.log(div.scrollTop);
        }
        div.onclick = function(){
            console.log("点击");
            // 设置页面被卷起内容的高度
            document.documentElement.scrollTop = 200;
        }
        // div.ondblclick = function(){
        //     console.log("双击");
        // }
        // div.oncontextmenu = function(){
        //     console.log("右键");
        // }

        // 给目标元素,以及所有后代元素都添加了一对事件
        // div.onmouseover = function(){
        //     console.log("移入");
        // }
        // div.onmouseout = function(){
        //     console.log("移出");
        // }
        // 只是给目标元素添加了
        // div.onmouseenter = function(){
        //     console.log("移入---");
        // }
        // div.onmouseleave = function(){
        //     console.log("移出---");
        // }

        // 鼠标移动事件
        // div.onmousemove = function(){
        //     console.log("===");
        // }

        // div.onmousedown = function(){
        //     console.log("按下");
        // }
        // div.onmouseup = function(){
        //     console.log("抬起");
        // }
    </script>
    <!-- 
        onclick 点击事件
        ondblclick 双击事件
        oncontextmenu 右键点击事件
        onmousedown 按下事件
        onmouseup抬起事件
     -->
</body>
</html>